<template>
  <div id="app-box">
    <!-- -->
    <component
      ref="layoutRef"
      id="layoutDomId"
      :style="gridStyle"
      :is="gridComName"
    ></component>
    <div class="btn-box">
      <span @click="changeDataFun()">切换数据源</span>
      <span @click="changeStyleFun()">切换样式</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "v2",

  data() {
    return {
      gridComName: null,
      // 定义组件尺寸
      gridStyle: {
        width: "460px",
        height: "578px",
      },
    };
  },

  mounted() {
    this.initGridFun();
  },

  methods: {
    initGridFun() {
      let that = this;
      // 传入components调试组件名称,以及当前this指向
      let result = showGridTestFn("HallTask");
      setTimeout(() => {
        that.gridComName = window[result];
      }, 500);
    },
    // 刷新数据源方法
    changeDataFun() {
      let dataObj = {
        echartdata: {
          title: "修改数据源",
          legendData: ["课时"],
          yData: [23, 60, 20, 36, 23, 85],
          xData: [
            "2019-01 ",
            "2019-02 ",
            "2019-03 ",
            "2019-04 ",
            "2019-05 ",
            "2019-06",
          ],
        },
      };
      //调用组件刷新方法 (调试用)
      gridChangeDataFun(dataObj, this);
    },
    // 刷新样式方法
    changeStyleFun() {
      let styleObj = {
        xShow: true,
        xColor: "red",
        xWeight: 24,
        yShow: true,
        yColor: "#fff",
        yWeight: 24,
        legendShow: true,
        legendColor: "#fff",
        legendWeight: 18,
        chartType: "折线图-1",
        chartDataColor1: "#A9F387",
        textStyle: { color: "#fff", fontSize: 32 },
        linerColor: "rgba(255,255,255,0)",
        hideBottomFrame: false,
      };
      //调用组件刷新方法  (调试用)
      gridChangeStyleFun(styleObj, this);
    },
  },
};
</script>
<style lang="scss">
#app-box {
  width: 100%;
  height: 100%;
  position: relative;
  #layoutDomId {
    //pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .btn-box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    span {
      cursor: pointer;
      display: inline-block;
      width: 100%;
      padding: 10px 0px;
      margin-top: 20px;
      background: rgb(71, 71, 139);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
